<template>
  <div>
    <h3>商家管理</h3>
    &emsp;&emsp;&emsp;<el-button @click="chakanxinxi">查看信息</el-button
    >&emsp;&emsp;&emsp;&emsp;
    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;商家:<a
      href="/merchant_info"
      ><el-avatar :src="mer_img"></el-avatar></a
    >&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
    <a href="/merchant_order">点击查询我的订单</a>
    <center>
      <el-table :data="tableData" height="400" border style="width: 70%">
        <el-table-column
          prop="dishes_class_name"
          label="菜品名称"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template #default="scope">
            <el-button @click="upd(scope.row.id)">修改</el-button>
            <el-button @click="dishes_class_info(scope.row.id)"
              >查询菜品详情</el-button
            >
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="dishes_class_del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </center>
    <div>
      <el-dialog title="用户列表" width="80%" :visible.sync="speakuserlist">
        <el-table :data="userinfo" style="width: 100%">
          <el-table-column label="用户消息" width="width">
            <template #default="scope">
              <el-button
                type="primary"
                @click="usertospeak(scope.row.user_id)"
                >{{ scope.row.userinfo }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="菜品管理" :visible.sync="dialogFormVisible">
        <el-form>
          <el-form-item label="菜品名字">
            <el-input
              v-model="cai_list.dishes_class_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="caiupd">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <el-dialog title="菜品详情" :visible.sync="OrderInfoList">
      <el-table :data="dishes_list">
        <el-table-column label="菜品图">
          <template slot-scope="scope">
            <el-image
              style="width: 100px; height: 100px"
              :src="scope.row.dishes_img"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column
          property="dishes_name"
          label="菜品名字"
        ></el-table-column>
        <el-table-column
          property="dishes_price"
          label="菜品价格"
        ></el-table-column>
        <el-table-column prop="" label="操作" align="center">
          <template #default="scope">
            <el-button @click="dishes_upd(scope.row.id)">修改</el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              @click="dishes_del(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <div>
      <el-dialog title="菜品修改" :visible.sync="dishes_cli">
        <el-form>
          <el-form-item label="菜品名字">
            <el-input
              v-model="xiudis.dishes_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="菜品图片">
            <img :src="xiudis.dishes_img" width="200" height="200" />
            <el-upload
              action="http://up-z2.qiniup.com"
              :on-success="uploadSuccess"
              :auto-upload="true"
              :data="upload_data"
              :on-error="uploadError"
            >
              <el-button size="small" type="primary">点击选择图片 </el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="菜品价格">
            <el-input
              v-model="xiudis.dishes_price"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dishes_cli = false">取 消</el-button>
          <el-button type="primary" @click="caiupdate">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="菜品添加" :visible.sync="dishes_class_add">
        <el-form>
          <el-form-item label="菜品名字">
            <el-input v-model="dishes_class_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dishes_class_add = false">取 消</el-button>
          <el-button type="primary" @click="add_dish_class">确 定</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-dialog title="商品添加" :visible.sync="dishes_add">
        <el-form>
          <el-form-item label="商品名字">
            <el-input v-model="dishes_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="商品图片">
            <img :src="xiudis.dishes_img" width="200" height="200" />
            <el-upload
              action="http://up-z2.qiniup.com"
              :on-success="uploadSuccess"
              :auto-upload="true"
              :data="upload_data"
              :on-error="uploadError"
            >
              <el-button size="small" type="primary">点击选择图片 </el-button>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input v-model="dishes_price" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="所属菜品">
            <select v-model="addaddress_id">
              <option
                v-for="(item, i) in tableData"
                :key="i"
                :label="item.dishes_class_name"
                :value="item.id"
              ></option>
            </select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dishes_add = false">取 消</el-button>
          <el-button type="primary" @click="add_dishes(addaddress_id)"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>

    <el-button @click="dishes_class_one_add">添加菜品</el-button>
    <el-button @click="chufadishes">添加商品</el-button>
  </div>
</template>

<script>
import Axios from "axios";
export default {
  name: "",
  data() {
    return {
      tableData: [],
      userinfo: [],
      dishes_list: [],
      xiudis: [],
      dialogFormVisible: false,
      OrderInfoList: false,
      dishes_cli: false,
      dishes_class_add: false,
      dishes_add: false,
      speakuserlist: false,
      cai_list: {
        id: 0,
        dishes_class_name: "",
      },
      uid: "",
      dishes_class_name: "",
      addaddress_id: "",
      dishes_name: "",
      dishes_img: "",
      dishes_price: "",
      chat_id: "",
      upload_data: {
        token: "",
      },
      qiniu_token: "",
      mer_name: "",
      portrait_img: "",
      mer_img: "",
    };
  },
  props: {},

  components: {},

  created() {},

  mounted() {
    // 获取七牛云token
    Axios.get("http://127.0.0.1:8000/user/qiniu_token/").then((res) => {
      console.log("获取七牛云token>>", res);
      this.qiniu_token = res.data.token;
      this.upload_data.token = res.data.token;
    });
    // 获取当前登录商家的信息
    Axios.get("http://127.0.0.1:8000/user/merchant/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      this.uid = res.data.userinfo.id;
      this.mer_name = res.data.userinfo.username;
      this.mer_img = res.data.userinfo.portrait_img;
      console.log("获取登录商家的信息>>", res);
    });
    // 获取当前商家下的菜品
    Axios.get("http://127.0.0.1:8000/user/dishesclass/", {
      headers: { token: localStorage.getItem("token") || "" },
    }).then((res) => {
      console.log("获取该商家的菜品>>", res);
      this.tableData = res.data.data;
    });
  },

  methods: {
    // 上传成功的钩子方法
    uploadSuccess(res, files) {
      console.log("上传图片成功的响应>>>", res);
      console.log("上传的文件", files);
      // 图片地址        图片文件路径                图片名
      this.url = "http://rg0riamy6.hn-bkt.clouddn.com/" + res.key;
      this.xiudis.dishes_img = this.url;
      console.log("整体的图片地址", this.url);
    },
    // 文件上传失败时的钩子
    uploadError(err) {
      console.log(err);
      this.$message({
        type: "error",
        message: err.response.msg,
      });
    },
    // 获取菜品下的菜
    dishes_class_info(id) {
      this.OrderInfoList = true;
      Axios.get("http://127.0.0.1:8000/user/dishes/" + id + "/").then((res) => {
        console.log("获取菜品分类下的菜>>", res);
        this.dishes_list = res.data.data;
      });
    },
    // 获取要修改的菜品
    upd(id) {
      this.dialogFormVisible = true;
      Axios.get("http://127.0.0.1:8000/user/disclas/" + id + "/").then(
        (res) => {
          console.log("获取指定菜品>", res);
          this.cai_list = res.data;
        }
      );
    },
    // 修改菜品信息
    caiupd() {
      this.dialogFormVisible = false;
      Axios.put(
        "http://127.0.0.1:8000/user/disclas/" + this.cai_list.id + "/",
        this.cai_list
      ).then((res) => {
        console.log(res);
        Axios.get("http://127.0.0.1:8000/user/dishesclass/", {
          headers: { token: localStorage.getItem("token") || "" },
        }).then((res) => {
          //   console.log("获取该商家的菜>>", res);
          this.tableData = res.data.data;
        });
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },
    // 删除菜品下的菜
    dishes_del(id) {
      Axios.delete("http://127.0.0.1:8000/user/dishesinfo/" + id + "/").then(
        (res) => {
          console.log("删除菜的响应>", res);
          if (res.status == 204) {
            this.$notify({
              title: "成功",
              message: "删除菜成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.msg,
            });
          }
        }
      );
    },
    // 删除菜品
    dishes_class_del(id) {
      Axios.delete("http://127.0.0.1:8000/user/disclas/" + id + "/").then(
        (res) => {
          console.log("删除菜品的响应>", res);
          if (res.status == 204) {
            this.$notify({
              title: "成功",
              message: "删除菜品成功",
              type: "success",
            });
          } else {
            this.$notify.error({
              title: "错误",
              message: res.data.msg,
            });
          }
          Axios.get("http://127.0.0.1:8000/user/dishesclass/", {
            headers: { token: localStorage.getItem("token") || "" },
          }).then((res) => {
            //   console.log("获取该商家的菜>>", res);
            this.tableData = res.data.data;
          });
        }
      );
    },
    // 获取要修改的菜
    dishes_upd(id) {
      this.dishes_cli = true;
      Axios.get("http://127.0.0.1:8000/user/dishesinfo/" + id + "/").then(
        (res) => {
          console.log("获取单个菜品信息>>>", res);
          this.xiudis = res.data;
        }
      );
    },
    // 修改菜的信息
    caiupdate() {
      this.dishes_cli = false;
      Axios.put(
        "http://127.0.0.1:8000/user/dishesinfo/" + this.xiudis.id + "/",
        this.xiudis
      ).then((res) => {
        console.log("修改的响应", res);
        if (res.status == 200) {
          this.$notify({
            title: "成功",
            message: "修改成功",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },
    // 点击添加弹出数据表
    dishes_class_one_add() {
      this.dishes_class_add = true;
    },
    // 添加菜品
    add_dish_class() {
      this.dishes_class_add = false;
      Axios.post("http://127.0.0.1:8000/user/disclas/", {
        dishes_class_name: this.dishes_class_name,
        uid: this.uid,
      }).then((res) => {
        console.log("添加菜品的响应>>", res);
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "添加菜品成功",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
        Axios.get("http://127.0.0.1:8000/user/dishesclass/", {
          headers: { token: localStorage.getItem("token") || "" },
        }).then((res) => {
          this.tableData = res.data.data;
        });
      });
    },
    // 点击按钮跳转添加商品页面
    chufadishes() {
      this.dishes_add = true;
    },
    // 添加商品
    add_dishes(id) {
      this.dishes_add = false;
      console.log("11111", id);
      Axios.post("http://127.0.0.1:8000/user/dishesinfo/", {
        dishes_name: this.dishes_name,
        dishes_img: this.dishes_img,
        dishes_price: this.dishes_price,
        uid: this.uid,
        dishes_class_id: id,
      }).then((res) => {
        console.log("添加商品的响应>>", res);
        if (res.data.code == 200) {
          this.$notify({
            title: "成功",
            message: "添加商品成功",
            type: "success",
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: res.data.msg,
          });
        }
      });
    },
    // 获取给商家发送消息的用户
    chakanxinxi() {
      this.speakuserlist = true;
      Axios.get("http://127.0.0.1:8000/chat/user_show/", {
        params: { mid: this.uid },
      }).then((res) => {
        console.log("查看用户信息数据>>>", res);
        this.userinfo = res.data.data;
      });
    },
    // 跳转聊天室
    usertospeak(id) {
      console.log("mid", this.uid);
      console.log("uid", id);
      Axios.get("http://127.0.0.1:8000/chat/user_message/", {
        params: { uid: id },
      }).then((res) => {
        console.log("房间》》", res);
        this.chat_id = res.data.rid;
        this.portrait_img = res.data.portrait_img;
        console.log("Fangjian>>", this.chat_id);
        this.$router.push({
          path: "/message_mert",
          query: {
            mid: this.uid,
            uid: id,
            chat_id: this.chat_id,
            mer_name: this.mer_name,
            portrait_img: this.portrait_img,
            mer_img: this.mer_img,
          },
        });
      });
    },
  },

  computed: {},

  watch: {},

  directives: {},

  filters: {},
};
</script>

<style>
* {
  margin: 0;
}
</style>
